<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Document</title>

  <link rel="stylesheet" href="framework7/framework7.ios.min.css">
  <link rel="stylesheet" href="framework7/framework7.ios.colors.min.css">
</head>
<body>

  <div id="app">
    <f7-statusbar></f7-statusbar>
    <f7-panel left reveal layout="dark" theme="pink">
      <f7-view navbar-fixed>
        <f7-pages>
          <f7-page>
            <f7-navbar title="Left Panel"></f7-navbar>
            <f7-list>
              <f7-list-item link="/cards/" title="Cards"></f7-list-item>
              <f7-list-item link="/lists/" title="Lists"></f7-list-item>
            </f7-list>
          </f7-page>
        </f7-pages>
      </f7-view>
    </f7-panel>
    <f7-panel right cover>
      <p>Panel right content</p>
    </f7-panel>
    <f7-views navbar-through>
      <f7-view main url="/" :dynamic-navbar="true">
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon="icon-bars" open-panel="left"></f7-link>
          </f7-nav-left>
          <f7-nav-center sliding>Hello World</f7-nav-center>
          <f7-nav-right>
            <f7-link icon="icon-bars" open-panel="right"></f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-pages>
          <f7-page toolbar-fixed>
            <f7-toolbar>
              <f7-link>Left</f7-link>
              <f7-link>Right</f7-link>
            </f7-toolbar>

            <f7-list>
              <f7-list-item title="Content Block" link="/content-block/"></f7-list-item>
              <f7-list-item title="Cards" link="/cards/"></f7-list-item>
              <f7-list-item title="Lists" link="/lists/"></f7-list-item>
              <f7-list-item title="Contacts" link="/contacts/"></f7-list-item>
              <f7-list-item title="Sortable" link="/sortable/"></f7-list-item>
              <f7-list-item title="Swipeout" link="/swipeout/"></f7-list-item>
              <f7-list-item title="Accordion" link="/accordion/"></f7-list-item>
              <f7-list-item title="Forms" link="/forms/"></f7-list-item>
              <f7-list-item title="Smart Select" link="/smart-select/"></f7-list-item>
              <f7-list-item title="Chips" link="/chips/"></f7-list-item>
              <f7-list-item title="Grid" link="/grid/"></f7-list-item>
              <f7-list-item title="Preloader" link="/preloader/"></f7-list-item>
              <f7-list-item title="Progress Bar" link="/progressbar/"></f7-list-item>
              <f7-list-item title="Pull To Refresh" link="/pull-to-refresh/"></f7-list-item>
              <f7-list-item title="Infinite Scroll" link="/infinite/"></f7-list-item>
              <f7-list-item title="Swiper" link="/swiper/"></f7-list-item>
              <f7-list-item title="Messages" link="/messages/"></f7-list-item>
              <f7-list-item title="Searchbar" link="/searchbar/"></f7-list-item>
              <f7-list-item title="Tabs" link="/tabs/"></f7-list-item>
              <f7-list-item title="Tabs Swipeable" link="/tabs-swipeable/"></f7-list-item>
              <f7-list-item title="Navbars & Toolbars" link="/bars/"></f7-list-item>
              <f7-list-item title="FAB" link="/fab/"></f7-list-item>
              <f7-list-item title="FAB Speed Dial" link="/fab-dial/"></f7-list-item>
              <f7-list-item title="Login Screen" link="/login-screen/"></f7-list-item>
              <f7-list-item title="Virtual List" link="/virtual-list/"></f7-list-item>
              <f7-list-item title="Photo Browser" link="/photo-browser/"></f7-list-item>
              <f7-list-item title="Modals" link="/modals/"></f7-list-item>
            </f7-list>
            <f7-list>
              <f7-list-item title="Dynamic Route" link="/user/45/posts/28/?sort=first#opened"></f7-list-item>
              <f7-list-item title="Data Binding" link="/data-binding/"></f7-list-item>
            </f7-list>
          </f7-page>
        </f7-pages>
      </f7-view>
    </f7-views>
    <!-- Popover -->
    <f7-popover id="demo-popover" style="width:200px">
      <f7-block>
        <p>Hello, i'm Popover</p>
      </f7-block>
    </f7-popover>
    <!-- Picker Modal-->
    <f7-picker-modal id="demo-picker" :opened="pickerOpened">
      <f7-toolbar>
        <f7-nav-left></f7-nav-left>
        <f7-nav-right>
          <!-- Using state: -->
          <f7-link @click="pickerOpened=false">Done</f7-link>
          <!--
          Or using F7 API:
          <f7-link close-picker>Done</f7-link>
          -->
        </f7-nav-right>
      </f7-toolbar>
      <f7-block>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste qui architecto recusandae veniam delectus vero libero illo aliquid, fuga ratione vel facilis iure est fugiat sunt nihil, consectetur veritatis.</p>
      </f7-block>
    </f7-picker-modal>
    <!-- Popup -->
    <f7-popup id="demo-popup" :opened="popupOpened">
      <f7-view>
        <f7-pages>
          <f7-page navbar-fixed>
            <f7-navbar title="Demo Popup">
              <f7-nav-right>
                <!-- Using state: -->
                <f7-link @click="popupOpened=false">Close</f7-link>
                <!--
                Or using F7 API:
                <f7-link close-popup>Close</f7-link>
                -->
              </f7-nav-right>
            </f7-navbar>
            <f7-block>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste qui architecto recusandae veniam delectus vero libero illo aliquid, fuga ratione vel facilis iure est fugiat sunt nihil, consectetur veritatis.</p>
              <p>Itaque impedit, nam, sed reprehenderit quaerat commodi veritatis ducimus eos nisi, at aliquam dolorum alias optio natus. Sit voluptate aperiam, cupiditate repellat quod fugiat non doloribus eveniet dolorem fugit nihil.</p>
              <p>Error cumque sunt dolorem aut, similique accusantium delectus. Minima, natus. Doloremque ratione veniam cupiditate modi aspernatur debitis possimus iure id delectus! Totam eveniet, impedit minus deserunt aliquid facere laboriosam dignissimos.</p>
              <p>Aliquid autem saepe sit cumque odit nihil eius consectetur impedit accusantium sunt, repudiandae quaerat cum! Esse autem ipsum aliquam, distinctio laborum excepturi facilis fuga vitae atque iusto eligendi, explicabo corporis.</p>
              <p>Necessitatibus minima quidem fugit corporis reprehenderit saepe facilis perspiciatis sit, consectetur nulla officia, pariatur accusantium quas voluptas. Illum placeat eligendi dolor nihil libero culpa, ex quas voluptas deleniti, unde id.</p>
            </f7-block>
          </f7-page>
        </f7-pages>
      </f7-view>
    </f7-popup>
    <!-- Login Screen -->
    <f7-login-screen id="demo-login-screen" :opened="loginScreenOpened">
      <f7-view>
        <f7-pages>
          <f7-page login-screen>
            <f7-login-screen-title>My App</f7-login-screen-title>
            <f7-list form>
              <f7-list-item>
                <f7-label>Username</f7-label>
                <f7-input name="username" placeholder="Username"></f7-input>
              </f7-list-item>
              <f7-list-item>
                <f7-label>Password</f7-label>
                <f7-input name="password" type="password" placeholder="Password"></f7-input>
              </f7-list-item>
            </f7-list>
            <f7-list>
              <!-- Using state: -->
              <f7-list-button title="Sign In" @click="loginScreenOpened=false"></f7-list-button>
              <!--
              Or using F7 API:
              <f7-list-button title="Sign In" close-login-screen></f7-list-button>
              -->
              <f7-list-label>
                <p>Click Sign In to close Login Screen</p>
              </f7-list-label>
            </f7-list>
          </f7-page>
        </f7-pages>
      </f7-view>
    </f7-login-screen>
  </div>
  <script src="framework7/framework7.js"></script>
  <script src="build.js"></script>
</body>
</html>